// 文章页面
import react from 'react'

import Header from './api/Header.js'
import Footer from './api/Footer.js'

import { Layout, Menu, List, Avatar, Space } from 'antd';
const { Content, Sider } = Layout;

import { MessageOutlined, LikeOutlined, StarOutlined } from '@ant-design/icons';

import '../styles/pages/article.scss'

function Article () {

  // 模拟数据, 点击不同分类时，再获取不同数据，然后渲染
  const listData = [];
  for (let i = 0; i < 23; i++) {
    listData.push({
      href: 'https://ant.design',
      title: `ant design part ${i}`,
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      content:
        'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
    });
  }

  const IconText = ({ icon, text }) => (
    <Space>
      {react.createElement(icon)}
      {text}
    </Space>
  );

  // 点击分类，获取不同数据
  const getData = async (index) => {
    // 根据 index 发送不同的请求，获取不同的文章列表数据
    console.log(index)
    // const data = await axios.get('http://rap2api.taobao.org/app/mock/277965/example/1614147684800')
    // console.log(data)
  }


  return (
    <div className="article">
      {/* 头部 */}
      <Header />

      {/* 侧边栏 */}
      <Layout className="label">
        <Content>
          <h2 style={{margin: '10px 0 10px'}}>分类：</h2>
          <Layout className="site-layout-background">
            {/* 列表 */}
            <Sider className="site-layout-background" width={200}>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                style={{ height: '100%' }}
              >
                <Menu.Item key="1" onClick={getData.bind(this, 'js')}>js</Menu.Item>
                <Menu.Item key="2">node</Menu.Item>
                <Menu.Item key="3">vue</Menu.Item>
              </Menu>
            </Sider>
            {/* 内容 */}
            <Content className="article-content" style={{ padding: '0 24px', minHeight: 280 }}>
              {/* pc端的布局 */}
              <List
                className="article-list"
                itemLayout="vertical"
                size="large"
                // 分页
                pagination={{
                  onChange: page => {
                    console.log(page);
                  },
                  pageSize: 2,
                  size: 'small',
                }}
                dataSource={listData}
                renderItem={item => (
                  <List.Item
                    key={item.title}
                    // 数据图标
                    actions={[
                      <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
                      <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
                      <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
                    ]}
                    // 图片
                    extra={
                      <img
                        width={272}
                        alt="logo"
                        src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
                      />
                    }
                  >
                    {/* 头像，标题 */}
                    <List.Item.Meta
                      avatar={<Avatar src={item.avatar} />}
                      title={<a href={item.href}>{item.title}</a>}
                    />
                    {item.content}
                  </List.Item>
                )}
              />
              {/* 移动端的布局 */}
            </Content>
          </Layout>
        </Content>
      </Layout>

      {/* 尾款 */}
      <Footer />
    </div>
  )
}

export default Article